<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>APP</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
	</head>
	<style>
		.aui-img-object1 {
			/*width: 100px;*/
			/*height: 60px;*/
			/*height: 50px;*/
			margin-right: 5px;
			/*border: 1px solid #16A085;*/
			max-width: 100px;
			max-height: 60px;
			margin: 0 auto;
			width: expression(document.body.clientWidth > 100?"100px":"auto" );
			height: expression(document.body.clientHeight > 60?"60px":"auto" );
		}
		.mysec {
			margin-right: 5px;
			width: 100px;
			height: 60px;
			border: solid 1px #ccc;
			background-color: #eee;
			background: url(../image/sig.png);/*图片地址*/
			background-origin: content;/*从content区域开始显示背景*/
			background-position: 50% 50%;/*图片上下左右居中*/
			background-size: contain;/*保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域*/
			background-repeat: no-repeat;/*图像不重复显示*/
		}
		.hide {
			display: none;
		}
		.moban {
			margin-left: 5px;
			background: #0062CC;
			color: #fff;
		}
		button, .aui-btn {
			padding: 4px 6px;
			margin-bottom: 0;
			font-size: 16px;
		}
	</style>
	<body>
		<div class="aui-content">
			<ul class="aui-user-view hide" id="list0">
				<script id="template0" type="text/x-dot-template">
					{{for(var i=0;i<it.length;i++){}}
					<li class="aui-user-view-cell aui-img" >
					<div>
					<img class="aui-img-object1 aui-pull-left icache0" src="../image/sig.png" urls="{{=it[i].imgfile}}">
					</div>
					<div class="aui-img-body">
					<span>{{=it[i].username}}<input class="aui-pull-right aui-checkbox aui-radio-info" type="checkbox" name="demo"></span>
					<p class='aui-ellipsis-1'>{{=it[i].time}}</p>
					</div>
					</li>
					{{}}}
				</script>
			</ul>
			<ul class="aui-user-view " id="list1"></ul>
			<ul class="aui-user-view hide" id="list2"></ul>
			<script id="template1" type="text/x-dot-template">
				{{for(var i=0;i<it.length;i++){}}
				<li class="aui-user-view-cell aui-img">
				<div class="aui-col-xs-4 mysec icache1" urls="{{=it[i].imgfile}}">
				<!--<img class="aui-img-object1 aui-pull-left icache1" src="../image/sig.png" urls="{{=it[i].filename1}}">-->
				</div>
				<!-- <div class="aui-col-xs-4 aui-text-center">
				<img class="aui-img-object1 aui-pull-left icache1" src="../image/sig.png" urls="{{=it[i].filename1}}">
				</div>-->
				<div class="aui-img-body">
				<span>{{=it[i].username}}<input class="aui-pull-right aui-checkbox aui-radio-info" type="checkbox" name="demo"></span>
				<p class='aui-ellipsis-1'>{{=it[i].time}}</p>
				</div>
				</li>
				{{}}}
			</script>
			<script id="template2" type="text/x-dot-template">
				{{for(var i=0;i<it.length;i++){}}
				<li class="aui-user-view-cell aui-img" id="{{=it[i].id}}">
				<div class="aui-col-xs-4 mysec icache2" urls="{{=it[i].imgfile}}">
				</div>
				<!--<div class="aui-col-xs-4 aui-text-center">
				<img class="aui-img-object1 aui-pull-left icache2" src="../image/sig.png" urls="{{=it[i].filename1}}">
				</div>-->
				<div class="aui-col-xs-7">
				<span>{{=it[i].username}}
				<p class="aui-pull-right"><button class="aui-btn aui-btn-info" >模</button>
				</p>
				</span>
				<p class='aui-ellipsis-1'>{{=it[i].time}}</p>
				</div>
				<div class="aui-col-xs-1">
				<input class="aui-checkbox aui-radio-info" type="checkbox" name="demo">
				</div>
				</li>
				{{}}}
			</script>
		</div>
	</body>
	<script type="text/javascript" src="../script/doT.min.js" ></script>
	<script type="text/javascript" src="../script/api.js" ></script>
	<script type="text/javascript" src="../script/zepto.js" ></script>
	<script type="text/javascript" src="../script/APICloud-rest-SHA1.js"></script>
	<!--<script type="text/javascript" src="../script/debug.js"></script>-->
	<script type="text/javascript">
		var APPID = "A6996268375072";
		var APPKEY = "DF2513D5-2329-E8B0-7064-A9D8D701D282";
		var filelist = [];
		var data = [];
		var filename = "胡华成_T_20151114222416.jpg";
		var bBusy = false;
		var bSelect = [true, true, true];
		var selectCount = [0, 0, 0];
		var uid = null;
		var bSave = false;
		var imgname = null;
		var txtname = null;
		var kind = 1;
		//0-基本，1-签名，2-模板
		var Dirs = [".", "data", "template"];
		var Types = [".txt", "jpg"];
		var models = ["SignData", "SignData", "SignTemplate"];
		//模型数据
		var datalist = [[], [], []];
		var tpllist = [];
		function FilterFile(s) {
			var pos1 = s.indexOf("_");
			var pos2 = s.indexOf(".jpg");
			if (pos1 > 0 && pos2 > 0) {
				var t = s.substring(pos1 + 3, pos2);
				t = t.substring(0, 4) + "/" + t.substring(4, 6) + "/" + t.substring(6, 8) + " " + t.substring(8, 10) + ":" + t.substring(10, 12) + ":" + t.substring(12, 14);
				return {
					username : s.substring(0, pos1),
					imgfile : s,
					datafile : s.substring(0, pos2) + ".txt",
					time : t
				};
			} else
				return null;
		}

		var bdel = false;
		function DelItem(item, callback) {
			if (bdel)
				return;
			bdel = true;
			var bdel1 = true;
			var bdel2 = true;
			var fs = api.require('fs');
			fs.remove({
				path : 'fs://' + item.imgfile,
			}, function(ret, err) {
				bdel1 = false;
				bdel = bdel1 && bdel2;
			});
			fs.remove({
				path : 'fs://' + item.datafile,
			}, function(ret, err) {
				bdel2 = false;
				bdel = bdel1 && bdel2;
				callback();
			});
		}

		function ShowData(k) {
			var data = [];
			for (var i = 0; i < filelist[k].length; i++) {
				if (!filelist[k][i].hasOwnProperty("del"))
					data.push(filelist[k][i]);
			}
			if (data.length > 0) {
				var template = document.getElementById('template' + k);
				var list_content = document.getElementById('list' + k);
				var pagefn = doT.template(template.text);
				list_content.innerHTML = pagefn(data);
				cache('.icache' + k, k);
			}
		}

		function AppendData(k) {
			//console.log(JSON.stringify(data));
			var data = [];
			for (var i = 0; i < filelist[k].length; i++) {
				if (!filelist[k][i].hasOwnProperty("del"))
					data.push(filelist[k][i]);
			}
			if (data && data.length > 0) {
				console.log(12);
				var template = document.getElementById('template' + k);
				var list_content = document.getElementById('list' + k);
				var pagefn = doT.template(template.text);
				var obj = document.createElement('div');
				obj.innerHTML = pagefn(data);
				console.log(12);
				list_content.appendChild(obj);
				cache('.icache' + k, k);
			}
		}

		function FindCloud() {
			//alert("云端同步");
			var kk = 2;
			var client = new Resource(APPID, APPKEY);
			var model = client.Factory(models[kk]);
			uid = $api.getStorage('uid');
			model.query({
				"filter" : {
					"where" : {
						"userid" : uid
					},
					"skip" : 0,
					"limit" : 20
				}
			}, function(ret, err) {
				var data = ret;
				if (ret && ret.length > 0) {
					api.writeFile({
						path : 'fs://template.json',
						data : JSON.stringify(data)
					}, function(ret, err) {
						var status = ret.status;
						if (status) {
							api.alert({
								msg : '数据同步成功!'
							});
						} else {
							api.alert({
								msg : "模板签名数据同步失败!"
							});
						}
					});
					//					function downfile(){
					//					var obj=listAll[i];
					//						if(obj.checked)
					//					{
					//						var el=$api.closest(obj, '.aui-user-view-cell');
					//						var item=filelist[kind][i];
					//						var fs=api.require('fs');
					//				        fs.remove({
					//					        path: 'fs://'+Dirs[kind]+"/"+item.datafile,
					//				        	},function(ret,err){
					//				        	//log(ret,err,item);
					//				        	fs.remove({
					//						        path: 'fs://'+Dirs[kind]+"/"+item.imgfile,
					//					       		},function(ret,err){
					//					       		$api.remove(el);
					//					       		//for(var j=i;j<filelist[kind].length-1;j++)
					//					       		filelist[kind][i].del=true;
					//					       		i+=1;
					//					       		if(i<count)
					//					       			delitem();
					//					       		else
					//					       		{
					//						       		fs=null;
					//						       		item=null;
					//						       		el=null;
					//					       		}
					//				        	});
					//				        });
					//					}
					//					else
					//					{
					//						//console.log('ti='+i);
					//						i+=1;
					//						if(i<count)
					//							delitem();
					//						else
					//					    {
					//								fs=null;
					//						        item=null;
					//						        el=null;
					//					     }
					//					}
					//				};
					//
					//					for(var i=0;i<data.data.length;i++)
					//					{
					//						var item=data.data[i];
					//						var bExist=false;
					//						for(var j=0;j<filelist[2].length;j++)
					//							if(item.imgfile.indexOf(filelist[2][j].imgfile)>=0)
					//							{
					//								bExist=true;break;
					//							}
					//						if(bExist)
					//						{
					//
					//						}
					//						else
					//						{
					//							var url=item.imgfile;
					//							api.download({
					//							    url: url,
					//							    savePath: 'fs://template/'+item.imgfile.name,
					//							    report: true,
					//							    cache: true,
					//							    allowResume:true
					//							},function(ret,err){
					//							    if (ret) {
					//							        var value = ('文件大小：'+ret.fileSize+'；下载进度：'+ret.percent+'；下载状态'+ret.state+'存储路径: '+ret.savePath);
					//							    } else{
					//							        var value = err.msg;
					//							    }
					//							});
					//						}
					//					}
				}
			});
		}

		function FindList(k, callback) {
			api.showProgress({
				style : 'default',
				animationType : 'fade',
				title : '努力加载中...',
				text : '先喝杯茶...',
				modal : true
			});
			var fs = api.require('fs');
			fs.readDir({
				path : 'fs://' + Dirs[k]
			}, function(ret, err) {
				var status = ret.status;
				if (status) {
					var data = ret.data;
					//console.log(JSON.stringify(data));
					if (data) {
						filelist[k] = [];
						for (var i in data) {
							var o = FilterFile(data[i]);
							if (o) {
								filelist[k].push(o);
							}
						}
						api.hideProgress();
						console.log(JSON.stringify(filelist));
						callback(k);
					} else {
						api.alert({
							msg : '此目录下为空'
						});
						api.hideProgress();
					}
				} else {
					api.hideProgress();
				}
			});
		}

		//循环递归调用方式
		function Del() {
			var id = "#list" + kind;
			var listAll = $api.domAll(id + ' .aui-checkbox');
			var count = listAll.length;
			var i = 0;
			delitem();
			function delitem() {
				var obj = listAll[i];
				if (obj.checked) {
					var el = $api.closest(obj, '.aui-user-view-cell');
					var item = filelist[kind][i];
					var fs = api.require('fs');
					fs.remove({
						path : 'fs://' + Dirs[kind] + "/" + item.datafile,
					}, function(ret, err) {
						//log(ret,err,item);
						fs.remove({
							path : 'fs://' + Dirs[kind] + "/" + item.imgfile,
						}, function(ret, err) {
							$api.remove(el);
							//for(var j=i;j<filelist[kind].length-1;j++)
							filelist[kind][i].del = true;
							i += 1;
							if (i < count)
								delitem();
							else {
								fs = null;
								item = null;
								el = null;
							}
						});
					});
				} else {
					i += 1;
					if (i < count)
						delitem();
				}
			};
		}

		function ChangeShow(k) {
			if (kind == k)
				return;
			var alllist = $api.domAll('.aui-user-view');
			$api.addCls(alllist[kind], 'hide');
			kind = k;
			$api.removeCls(alllist[kind], 'hide');
		}

		function cacheItem(el, k) {
			var url = $api.attr(el, 'urls');
			var path = 'fs://' + Dirs[k] + "/" + url;
			api.readFile({
				path : path
			}, function(ret, err) {
				url = 'url(' + ret.data + ')';
				var css = "background-image:" + url;
				$api.css(el, css);
			});
		}

		function cache(selector, k) {
			var imgs = $api.domAll(selector);
			for (var i = 0; i < imgs.length; i++) {
				(function() {
					var el = imgs[i];
					var url = $api.attr(el, 'urls');
					var path = 'fs://' + Dirs[k] + "/" + url;
					api.readFile({
						path : path
					}, function(ret, err) {
						url = 'url(' + ret.data + ')';
						var css = "background-image:" + url;
						$api.css(el, css);
					});
				})(i);
			}
		}

		function iCache(selector, k) {
			selector.each(function(data) {
				//alert(JSON.stringify(data));
				! function(data) {
					var url = selector.eq(data).attr("urls");
					//url=filelist[filelist.length-1];
					var filename = url;
					//.filename1;//GetFileName(url);
					//log(Dirs,kind);
					var path = 'fs://' + Dirs[k] + "/" + filename;
					//console.log(path);
					api.readFile({
						path : path
					}, function(ret, err) {
						//coding...
						url = 'url(' + ret.data + ')';
						selector.eq(data).css("background-image", url);
						//backgroud模式
						//selector.eq(data).attr('src', ret.data);//img模式
					});
				}(data);
			});
		};
		apiready = function() {
			filelist[0] = [];
			filelist[1] = [];
			filelist[2] = [];
			FindList(1,AppendData);
			FindList(2,AppendData);
			//FindList(2, AppendData);
			ChangeShow(1);
			//缺省为用户签名
			//刷新文件事件
			api.addEventListener({
				name : 'SignList_Change'
			}, function(ret, err) {
				if (ret && ret.value)
					ChangeShow(ret.value);
			});
			//删除文件事件
			api.addEventListener({
				name : 'SignList_DelFile'
			}, function(ret, err) {
				Del();
			});
			//全选事件
			api.addEventListener({
				name : 'SignList_SelectAll'
			}, function(ret, err) {
				var id = "#list" + kind;
				console.log(kind);
				var listAll = $api.domAll(id + ' .aui-checkbox');
				for (var i = listAll.length - 1; i >= 0; i--) {
					if (listAll[i])
						listAll[i].checked = bSelect[kind];
				}
				bSelect[kind] = !bSelect[kind];
			});
			//刷新文件事件
			api.addEventListener({
				name : 'SignList_Refresh'
			}, function(ret, err) {
				kind = 2;
				FindList(kind, ShowData);
			});
			//文件排序事件
			api.addEventListener({
				name : 'SignList_Sort'
			}, function(ret, err) {
				//FindList(ShowData);
			});
			//搜索文件事件
			api.addEventListener({
				name : 'SignList_Search'
			}, function(ret, err) {
				FindList(ShowData);
			});
			//云端同步事件
			api.addEventListener({
				name : 'SignList_Cloud'
			}, function(ret, err) {
				FindCloud();
			});
			
		}
	</script>
</html>